import { Button, message, Modal, Tooltip } from 'antd';
import { useCallback, useEffect, useState } from 'react';
import { CheckCircleFilled, WarningFilled } from '@ant-design/icons';
import ProTable from '@ant-design/pro-table';
import type { ProColumns } from '@ant-design/pro-table';
import useAlbumDetail from '@/hooks/useAlbumDetail';
import useArtistDetail from '@/hooks/useArtistDetail';

import styles from './style.less';
import { postTrackDuplicatedCheck } from '@/services/cms/14579';

type GetParams = {
  singerName: string;
  trackName: string;
  albumName?: string;
  trackId?: number;
};
type Props = {
  getParams: () => GetParams;
  checkTrigger?: boolean;
  onCheckFinished?: () => void;
};

type TrackDetail = {
  trackId: number;
  trackName: string;
  album: any;
  trackSingerList: any[];
};

const CheckSongDuplicate: React.FC<Props> = ({ getParams, checkTrigger, onCheckFinished }) => {
  const [modalVisible, setModalVisible] = useState(false);
  const [songist, setSongList] = useState<TrackDetail[]>([]);
  const [dupChecked, setDupChecked] = useState(false);
  const [loading, setLoading] = useState(false);

  const { albumDetail, showAlbumDetail } = useAlbumDetail();
  const { artistDetail, showArtistDetail } = useArtistDetail();

  const onCheckDuplicate = useCallback(async () => {
    const { singerName, trackName, albumName, trackId } = getParams();
    if (!singerName || !trackName) {
      message.error('请选择歌手并填写歌曲名称');
      if (checkTrigger && onCheckFinished) {
        onCheckFinished();
      }
      return;
    }
    setLoading(true);
    try {
      const res = await postTrackDuplicatedCheck({
        filters: { singerName, trackName, albumName },
      });
      setLoading(false);
      setDupChecked(true);
      setSongList(res.data.list.filter((item) => item.trackId !== trackId));
      if (checkTrigger && onCheckFinished) {
        onCheckFinished();
      }
    } catch (error) {
      setLoading(false);
      if (checkTrigger && onCheckFinished) {
        onCheckFinished();
      }
    }
  }, [getParams, checkTrigger, onCheckFinished]);

  useEffect(() => {
    if (checkTrigger) {
      onCheckDuplicate();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [checkTrigger]);

  const columns: ProColumns<TrackDetail>[] = [
    {
      title: '歌曲ID',
      dataIndex: 'trackId',
    },
    {
      title: '歌曲名',
      dataIndex: 'trackName',
    },
    {
      title: '专辑名',
      dataIndex: 'album',
      render: (_, record) => {
        const { album } = record;
        if (!album) {
          return null;
        }
        return (
          <a
            onClick={() => {
              showAlbumDetail(album.albumId, album.albumName);
            }}
          >
            {album.albumName}
          </a>
        );
      },
    },
    {
      title: '所属艺人',
      dataIndex: 'trackSingerList',
      render: (_, record) => {
        return record.trackSingerList.map((item, index) => {
          return (
            <>
              <a
                onClick={() => {
                  showArtistDetail(item.singerId, item.singerName);
                }}
              >
                {item.singerName}
              </a>
              {index < record.trackSingerList.length - 1 && <span>、</span>}
            </>
          );
        });
      },
    },
  ];

  return (
    <span className={styles.checkDuplicate}>
      <Button className="linkBtn" type="link" loading={loading} onClick={onCheckDuplicate}>
        查重
      </Button>

      {dupChecked && songist.length === 0 && (
        <Tooltip placement="top" title="无重复">
          <CheckCircleFilled className={`${styles.dupCheckIcon} successWord`} />
        </Tooltip>
      )}
      {dupChecked && songist.length > 0 && (
        <Tooltip placement="top" title="疑似重复">
          <WarningFilled
            className={`${styles.dupCheckIcon} dangerWord`}
            onClick={() => {
              setModalVisible(true);
            }}
          />
        </Tooltip>
      )}
      <Modal
        title="疑似重复"
        visible={modalVisible}
        destroyOnClose
        footer={false}
        onCancel={() => {
          setModalVisible(false);
        }}
      >
        <ProTable
          rowKey="trackId"
          columns={columns}
          dataSource={songist}
          pagination={false}
          toolBarRender={false}
          search={false}
        />
        {albumDetail}
        {artistDetail}
      </Modal>
    </span>
  );
};

export default CheckSongDuplicate;
